<template>
  <div class="container">
    <el-table id="advertising"  :data="admissionsList" highlight-current-row style="width: 100%" :header-cell-style="{background:'#EEF3FC',color:'#333333'}">
      <el-table-column
        label="序号"
        type="index"
        style="width: 8%"
        align="center">
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="广告标题" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          <span>{{ scope.row.title || '/ ' }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" align="center" label="广告简介" > 
        <template slot-scope="scope">
          <span>{{ scope.row.summary || '/ '}}</span>
        </template>
      </el-table-column>
      <el-table-column  style="width: 12%" align="center" label="提交时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime || '/ '}}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="审批人">
        <template slot-scope="scope">
          <span>{{ scope.row.resultUser }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="审批时间">
        <template slot-scope="scope">
          <span>{{ scope.row.resultTime }}</span>
        </template>
      </el-table-column>

      <!--<el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="提交时间">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.tjsj }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="审批时间">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.spsj }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column style="width: 12%" align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="isShow === 'W'" type="text" @click="open(scope.row)">原因</el-button>
          <i v-if="isShow === 'W'">|</i>
          <el-button type="text"  @click="urlDetailAdvertising(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      <!-- 原因弹窗 -->
    <resion :obj="obj" @handleClose="handleClose"></resion>
  </div>
</template>

<script>
 import resion from '@/components/resion/resion'
  export default {
    components: { resion },

    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    props: {
      type: {
        type: String,
        default: 'D'
      },
      admissionsList:{
        type:Array,
        return:{
          default:[]
        }
      },
      pageSizes:{
        type:Array
      },
      total:{
        type:Number
      },
      currentPage:{
        type:Number
      },
      pagesize:{
        type:Number
      }
    },
    watch: {
      admissionsList: {
        deep: true,
        immediate: true,
        handler(val) {
          this.admissionsList=val
          console.log('获取监听过来的招生广告信息数组11111',this.admissionsList.length)
        },
      },
    },
    data() {
      return {
        list: null,
        isShow:'D',
        listQuery: {
          page: 1,
          limit: 5,
          type: this.type,
          sort: '+id'
        },
           // 子组件的数据
        obj:{
          // 是否显示弹窗
          visible:false,
          // 具体原因
          resultSummary:'这里是原因'
        }
      }
    },
    created() {
      console.log('需要渲染的过来招生广告信息列表数据',this.admissionsList)
      this.getList()
    },
    methods: {
          // 条数变化
      handleSizeChange(val) {
        console.log('广告条数变化',val)
        let obj={
          currentPage: this.currentPage,
          pagesize:this.pagesize,
          total:this.total,
          val:val
        }
        this.$emit('handleSizeChange',obj)
      },
      // 换页
      handleCurrentChange(val) {
        console.log('广告页数变化',val)
        let obj={
          currentPage:this.currentPage,
          total:this.total,
          val:val
        }
        this.$emit('handleCurrentChange',obj)
      },
      // 招生广告信息详情跳转
      urlDetailAdvertising(data){
        console.log("招生广告详情跳转")
        this.$router.push({ name: 'advertising-particulars', params: {id:this.isShow,item:data}})
      },
      getList() {
        this.loading = true
        this.isShow = this.listQuery.type
      },
       open(row) {
        console.log('获取原因',row)
         this.obj.resultSummary=row.resultSummary
        this.obj.visible=true
      },
        // 原因弹窗关闭
      handleClose(data){
        console.log('获取子组件关闭',data)
        this.obj.visible=data
      },

      current_change:function(currentPage){
        this.currentPage = currentPage;
      },
    }
  }
</script>
<style scoped lang='scss'>
.container{
  // 设置表格的每一个表格的高度
  /deep/.el-table td, .el-table th{
    padding: 4px 0;
  }
}

</style>

